<template>
	<div class="rankingBox" >
		<p class="title">热点排行</p>
		<div class="rankingBtm">
				<a class="block_a software" :href="Path + item1?.url" v-for="(item1, index) in contentList">
				<span class="iconfont icon-Tag" :class="'iconfont' + (index + 1)">
					<span class="num">{{ index + 1 }}</span>
				</span>
				<img class="imgs" :src="getImgPath(item1.headImag)" alt="" srcset="" />
				<div class="softwareCet">
					
						<p class="softwareCetTitle">{{ item1.title }}</p>
						<p class="tips">
							<span>类别：{{ item1.extend.softWare_type }}</span>
							<span class="size">{{ item1.extend.enclosureUpload?.length ? item1.extend.enclosureUpload[0].resourceSize : '大小：未知' }}</span>
						</p>
					</div>
						<span class="p4"  @click.stop.prevent='downLoadFile(item1)'>立即下载</span>
				</a>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			Path: getRootPath(),
			query: GetQueryString(),
			contentList: [],
		};
	},
	mounted() {
		this.getContentOfChannel();
	},
	methods: {
		getContentOfChannel() {
			let param = {
				//channelIdStr:this.query.id,
				pageNum: 1,
				pageSize: 5,
				typeIdStr: '1401'
			};
			contentApi.fetchContentOfChannel(param, res => {
				if (res.code == '00000 00000') {
					this.contentList = res.data.records;
				} else {
				}
			});
		},
		getImgPath(url){
			return imgPath(url);
		},
		downLoadFile(item) {
			let param = {
				contentId:item.id,
				resIds:item.extend.enclosureUpload[0]?.id
			};
			contentApi.downloadAnnexs(param, res => {
				downloadFile(res.data, item.title + '.zip');
				
			});
		},
	}
};
</script>

<style>
.rankingBox {
	width: 320px;
}

.rankingBox .title {
	height: 20px;
	font-size: 20px;
	font-weight: 600;
	color: #333333;
	line-height: 20px;
}
.rankingBox .rankingBtm .software:hover .p4 {
	display: block;
}
.rankingBox .rankingBtm {
	margin-top: 24px;
}
.rankingBox .rankingBtm .software {
	cursor: pointer;
	height: 64px;
	margin-top: 12px;
	padding: 8px 0;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}

.rankingBox .rankingBtm .software .iconfont {
	font-size: 24px;
	position: relative;
	width: 24px;
	height: 24px;
	line-height: 24px;
}
.rankingBox .rankingBtm .software .iconfont .num {
	position: absolute;
	left: 8px;
	top: 7px;
	height: 12px;
	font-size: 12px;
	/* font-weight: 600; */
	line-height: 12px;
}
.rankingBox .rankingBtm .software .iconfont1 {
	color: #ff3333;
}
.rankingBox .rankingBtm .software .iconfont1 .num {
	color: #ffffff;
}
.rankingBox .rankingBtm .software .iconfont2 {
	color: #ff6d34;
}
.rankingBox .rankingBtm .software .iconfont2 .num {
	color: #ffffff;
}
.rankingBox .rankingBtm .software .iconfont3 {
	color: #ffb400;
}
.rankingBox .rankingBtm .software .iconfont3 .num {
	color: #ffffff;
}
.rankingBox .rankingBtm .software .iconfont4 {
	color: #efefef;
}
.rankingBox .rankingBtm .software .iconfont4 .num {
	color: #999999;
}
.rankingBox .rankingBtm .software .iconfont5 {
	color: #efefef;
}
.rankingBox .rankingBtm .software .iconfont5 .num {
	color: #999999;
}
.rankingBox .rankingBtm .software .imgs {
	width: 48px;
	height: 48px;
	margin-left: 12px;
}

.rankingBox .rankingBtm .software .softwareCet {
	margin-left: 16px;
}
.rankingBox .rankingBtm .software .softwareCet .softwareCetTitle {
	margin-top: 5px;
	height: 14px;
	font-size: 14px;
	font-weight: 400;

	line-height: 14px;
}
.rankingBox .rankingBtm .software .softwareCet .softwareCetTitle:hover {
	color: #ff3333;
}
.rankingBox .rankingBtm .software .tips {
	width: 190px;
	margin-top: 12px;
	height: 12px;
	font-size: 12px;
	color: #666666;
	line-height: 12px;
}
.rankingBox .rankingBtm .software .tips .size {
	margin-left: 16px;
}
.rankingBox .rankingBtm .software .p4 {
	margin-left: 16px;
	display: none;
	cursor: pointer;
	padding: 6px 8px;
	height: 12px;
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
	line-height: 12px;
	background: #3ace72;
	border-radius: 4px;
}
.rankingBox .rankingBtm .software .p4:hover {
	background: #60db8b;
}

.rankingBox .rankingBtm .software .p4:active {
	background: #27a85d;
}
.ranking:nth-child(2),
.ranking:nth-child(3) {
	margin-left: 40px;
}
</style>
